<template>
  <div class="ClinicActivityList">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">患教活动管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/clinicActivity' }"
        >患教活动管理</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="hospitalMain">
      <!--      搜索部分-->
      <div class="hospitalMain-top">
        <!--        搜索-->
        <div class="hospitalMain-search">
          <div class="search">
            患教名称:
            <el-input
              placeholder="请输入内容"
              v-model="searchForm.name"
              clearable
            ></el-input>
          </div>
          <div class="search">
            主持人:
            <el-input
              placeholder="请输入内容"
              v-model="searchForm.host"
              clearable
            ></el-input>
          </div>
          <div class="search">
            报名开始：
            <el-date-picker
              v-model="searchForm.regTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <div class="search">
            报名结束：
            <el-date-picker
              v-model="searchForm.overTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <div class="search">
            活动状态:
            <template>
              <el-select v-model="searchForm.isud" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </div>
          <div class="search">
            直播开始：
            <el-date-picker
              v-model="searchForm.liveTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <div>
            <div></div>
            <div>
              <el-button>重置</el-button>
              <el-button type="primary" @click="searchActive()">搜索</el-button>
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <!--      表格名和添加部分-->
      <div class="name_add">
        <div><h3>活动列表</h3></div>
        <div>
          <!--点后弹出弹窗-->
          <el-form :inline="true">
            <el-form-item>
              <el-button type="primary" @click="showConfirmCodeDialog"
                >新增诊疗</el-button
              >
            </el-form-item>
          </el-form>
          <!--弹出的弹窗内容-->
          <el-dialog
            title="新增患教活动"
            :visible.sync="dialogVisible"
            center
            width="40%"
          >
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <el-form>
                主持人：<el-form-item>
                  <el-input
                    v-model="addActiveForm.name"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </el-form-item>
                活动主题：<el-form-item>
                  <el-input
                    v-model="addActiveForm.a_theme"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </el-form-item>
                <div></div>
                目标人数：<el-form-item>
                  <el-input
                    v-model="addActiveForm.a_target"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </el-form-item>
                直播时间：
                <el-date-picker
                  style="margin-bottom: 22px"
                  v-model="addActiveForm.a_liveTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <div></div>
                报名开始时间：
                <el-date-picker
                  style="margin-bottom: 22px"
                  v-model="addActiveForm.a_regTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <div></div>
                报名结束时间：
                <el-date-picker
                  style="margin-bottom: 20px"
                  v-model="addActiveForm.a_overTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <div></div>
                直播持续时间：
                <el-form-item>
                  <el-input
                    v-model="addActiveForm.a_time"
                    placeholder="分钟"
                    clearable
                  ></el-input>
                </el-form-item>
                患教费用：<el-form-item>
                  <el-input
                    v-model="addActiveForm.a_money"
                    placeholder="核桃币"
                    clearable
                  ></el-input>
                </el-form-item>
                患教说明：<el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="addActiveForm.a_details"
                >
                </el-input>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addActiveBtn()">确定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
      <!--    表格-->
      <template>
        <el-table :data="ActiveList" style="width: 100%">
          <el-table-column label="诊疗名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 1px">{{ scope.row.a_theme }}</span>
            </template>
          </el-table-column>
          <el-table-column label="参加人数" width="80">
            <template slot-scope="scope">
              <span style="margin-left: 1px">{{ scope.row.a_target }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报名开始时间" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 1px">{{ scope.row.a_regTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报名结束时间" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.a_overTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="活动金额" width="80">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.a_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="主持人" width="80">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.do_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="活动状态 " width="80">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.isud }}</span>
            </template>
          </el-table-column>
          <el-table-column label="取消时间" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.deltime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.overtime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="驳回理由" width="80">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.reason }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="middle"
                type="text"
                @click="showHosMsg(scope.row)"
                >查看
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handlePass(scope.$index, scope.row)"
                >通过
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDel(scope.$index, scope.row)"
                >驳回
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--    页码-->
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="getPageNumBtn"
        :current-page="page"
        :page-size="size"
        :total="activeCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClinicActivityList",
  created() {
    this.getActiveList();
  },
  data() {
    return {
      activeCount: null,
      //搜索
      searchForm:{
          name: "",
          host: "",
          regTime: "",
          overTime: "",
          liveTime: "",
          isud:"",
      },
      
      //
      dialogVisible: false,
      ActiveList: [],
      //新增活动参数
        addActiveForm:{
          name: "",
          a_theme: "",
          a_target: "",
          a_liveTime: "",
          a_regTime: "",
          a_overTime: "",
          a_time: "",
          a_money: "",
          a_details: "",
        },
        
      

      options: [
        {
          value: "选项1",
          label: "未开始",
        },
        {
          value: "选项2",
          label: "已开始",
        },
        {
          value: "选项3",
          label: "已取消",
        },
        {
          value: "选项4",
          label: "已结束",
        },
      ],
      isud: "",

      page: 1,
      size: 5,
    };
  },
  mounted() {
    this.getActiveList(this.page, this.size);
  },
  methods: {
    searchActive() {
      //搜索活动列表
      this.$service.activeService
        .searchActive(
          this.searchForm.name,
          this.searchForm.host,
          this.searchForm.regTime,
          this.searchForm.overTime,
          this.searchForm.liveTime,
          this.searchForm.isud,
          this.page,
          this.size
        )
        .then((res) => {
          this.aciveCount = res.data.data.integer;
          this.ActiveList = res.data.data.maps;
        });
    },
    getPageNumBtn(val) {
      //获取当前点击的页码
      this.page = val;
      this.getActiveList(this.page, this.size);
    },
    //添加活动
    addActiveBtn() {
      this.$service.activeService.addActiveBtn(
        this.addActiveForm.name,
      this.addActiveForm.a_theme,
      this.addActiveForm.a_target,
      this.addActiveForm.a_liveTime,
      this.addActiveForm.a_regTime,
      this.addActiveForm.a_overTime,
      this.addActiveForm.a_time,
      this.addActiveForm.a_money,
      this.addActiveForm.a_details).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success",
          });
          this.dialogVisible = false;
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    // 查看医院信息
    showHosMsg(hosRow) {
      console.log(hosRow);
      this.$router.push("/checkclinicactivitylist");
    },
    showConfirmCodeDialog() {
      this.dialogVisible = true; //显示弹窗
    },
    // open() {
    //   this.$confirm("是否保存?", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "primary",
    //   }).then(() => {
    //     this.$message({
    //       type: "success",
    //       message: "保存成功!",
    //     });
    //     this.dialogVisible = false; //显示弹窗
    //   });
    // },
    getActiveList(page, size) {
      //获取活动列表
      this.$service.activeService.getActiveList(page, size).then((res) => {
        this.activeCount = res.data.data.integer;
        this.ActiveList = res.data.data.maps;
      });
    },
  },
};
</script>

<style scoped lang="less">
.hospitalMain {
  display: flex;
  flex-direction: column;

  .hospitalMain-top {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;

    .hospitalMain-search {
      margin-right: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .search {
        display: flex;
        margin: 10px 0 10px;
        align-items: center;
        width: 30%;
        justify-content: space-between;

        .el-input,
        .el-select {
          width: 75%;
        }
      }
    }
  }

  .name_add {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
  }

  .el-pagination {
    margin-top: 10px;
  }
}
</style>
